<template>
  <div class="home">
    <input type="text" v-model="content" @keyup.enter="add"> 
    <h2>正在进行</h2>
    <ul>
      <to-do-item v-for="(item,index) in todoList" :key="item" :content="item" :index="index" @del="delFromTodoList" @checkClick="done"></to-do-item>

      <!-- <li v-for="(item,index) in todoList" :key="item">
        <input type="checkbox" name="" id="" @click="done(index)">
        {{item}}
        <button @click="del(index,todoList)">x</button>
      </li> -->
    </ul>
    <h2>已经完成</h2>
    <ul>
      <to-do-item v-for="(item,index) in doneList" :key="item" :content="item" :index="index" checked="checked" @del="delFromDoneList" @checkClick="todo"></to-do-item>
      <!-- <li v-for="(item,index) in doneList" :key="item">
        <input type="checkbox" checked @click="todo(index)">
        {{item}}
        <button @click="del(index,doneList)">x</button>
      </li> -->
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import ToDoItem from '@/components/ToDoItem.vue'

export default {
  name: 'HomeView',
  data() {
    return {
      content: '',
      //代办事项
      todoList:['代办事项1','代办事项2','代办事项3'],
      // 已完成事项
      doneList:[],
    }
  },
  components: {
    ToDoItem
  },
  methods:{
    add(){
      this.todoList.push(this.content)
      this.content = ''
    },
    done(index){
      this.doneList.push(this.todoList[index])
      this.todoList.splice(index,1)
    },
    todo(index){
      this.todoList.push(this.doneList[index])
      this.doneList.splice(index,1)
    },
    delFromTodoList(index){
      this.todoList.splice(index,1)
    },
    delFromDoneList(index){
      this.doneList.splice(index,1)
    },
  }
}
</script>

<style>
li{
  list-style: none;
}
</style>
